<template>
    <div class="wrap">
        <div class="table-top-wrap">
            <div>
                <div>
                    <Button class="features-btn" @click="handleBtnClick(null,'add')">
                        <Icon type="md-add" size="18" />新建
                    </Button>
                </div>
            </div>
            <div class="table-top-wrap-bottom">
                <div></div>
            </div>
        </div>
        <TreeTable ref="table" :data="list" :columns="columns" :expand-type="false">
            <template slot="likes" slot-scope="scope">
                <Button type="primary" size="small" class="menu-btn" @click="handleBtnClick(scope.row, 'edit')">修改</Button>
                <Button type="error" style="margin-left:10px;" size="small" class="menu-btn" @click="handleBtnClick(scope.row,'delete')">删除</Button>
            </template>
            <template slot="icon" slot-scope="scope">
                <Icon :type="scope.row.ModuleIcon" size="20" />
            </template>
        </TreeTable>
        <Modal :mask-closable="false" v-model="isModal" :title="ModalTitle" width="600">
            <div v-if="isModal">
                <Form ref="formItem" :model="formItem" :rules="ruleValidate" :label-width="100">
                    <Row>
                        <i-col :lg="{ span: 12}">
                            <FormItem label="名称" prop="DepName">
                                <i-input v-model="formItem.DepName" placeholder="请输入名称"></i-input>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 24}">
                            <FormItem label="创建科室">
                                <i-switch v-model="isSwitch">
                                    <span slot="open">开</span>
                                    <span slot="close">关</span>
                                </i-switch>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 15}" v-if="!isSwitch">
                            <FormItem label="科室选择" prop="ParentID">
                                <Select v-model="formItem.ParentID" style="width:200px">
                                    <Option v-for="item in list" :value="item.ID + ''" :key="item.ID">{{ item.DepName }}</Option>
                                </Select>
                            </FormItem>
                        </i-col>
                    </Row>
                </Form>
            </div>
            <div slot="footer">
                <Button size="large" @click="handleClose">取消</Button>
                <Button type="primary" size="large" @click="handleSubmit('formItem')">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
/**
 * 门店列表
 */
import { getAllDepartTablesList, getClinicList, deleteAllDepart, addAllDepartTablesItem } from './service';
import TreeTable from '@/components/TreeTable';
export default {
    name: 'OrganizationShop',
    components: {
        TreeTable
    },
    data() {
        return {
            allSelectArr: null,
            DepartmentID: '',
            isAddBtn: false,
            isProhibit: false,
            DepartID: [],
            isEdit: false,
            isSwitch: false,
            isModal: false,
            ModalTitle: '新建门店',
            itemId: 0,
            DepartList: [],
            clinicList: [],
            loading: true,
            formItem: this.initFormItem(),
            ruleValidate: {
                DepName: [
                    {
                        required: true,
                        message: '请输入内容',
                        trigger: 'change'
                    }
                ]
            },
            total: 0,
            list: [],
            search: {
                shopid: '',
                pageindex: 1,
                pagesize: 10
            },
            columns: [
                {
                    label: '名称',
                    prop: 'DepName',
                    type: 'template',
                    template: 'icon'
                },
                {
                    label: '操作',
                    prop: 'ID',
                    type: 'template',
                    template: 'likes'
                }
            ]
        };
    },
    mounted() {
        this.search.shopid = this.$route.params.id;
        this.getTablesListData();
    },
    methods: {
        // 科室选择
        handleChangeSelect(value) {
            getClinicList({
                parentid: value
            }).then(res => {
                this.clinicList = res.data;
            });
        },
        /* 表格搜索 */
        handleSearch() {
            this.loading = true;
            this.getTablesListData();
        },
        /* 关闭对话框 */
        handleClose() {
            this.isModal = false;
        },
        /* 复选框选中 */
        handleAllSelect(list) {
            let arr = [];
            for (let item in list) {
                arr.push(list[item].ID);
                arr.join(',');
            }
            arr = arr.join(',');
            this.allSelectArr = arr;
        },
        /* 提交 */
        handleSubmit(name) {
            this.$refs[name].validate(valid => {
                if (valid) {
                    const data = {
                        ID: this.itemId,
                        ShopID: this.search.shopid,
                        ParentID: this.isSwitch ? 0 : this.formItem.ParentID,
                        DepName: this.formItem.DepName
                    };
                    addAllDepartTablesItem(data).then(res => {
                        if (res.state == 'success') {
                            this.$Message.success('操作成功');
                            this.loading = true;
                            this.isModal = false;
                            this.getTablesListData();
                        } else {
                            this.$Message.error(res.message);
                        }
                    });
                }
            });
        },
        /* 表格数据请求 */
        getTablesListData() {
            const data = this.search;
            getAllDepartTablesList(data).then(res => {
                this.list = res.data;
                this.list = JSON.parse(JSON.stringify(this.list).replace(/"Children"/g, '"children"'));
                this.loading = false;
            });
        },
        /* 表格分页方法 */
        handleChangePage(type, page) {
            this.loading = true;
            if (type == 'page') {
                this.search.pageindex = page;
                this.getTablesListData();
            } else {
                this.search.pagesize = page;
                this.getTablesListData();
            }
        },
        /* 对话框 */
        handleBtnClick(item, type) {
            this.isSwitch = false;
            this.ModalTitle = '新建科室 / 诊室';
            this.formItem = this.initFormItem();
            if (type == 'edit' || type == 'add') {
                this.itemId = 0;
                this.isModal = true;
                if (type == 'edit') {
                    this.ModalTitle = '修改科室 / 诊室';
                    if (item.children) {
                        this.isSwitch = true;
                    }
                    this.itemId = item.ID;
                    this.formItem = {
                        ...this.formItem,
                        ParentID: item.ParentID + '',
                        DepName: item.DepName
                    };
                }
            } else if (type === 'delete') {
                this.$Modal.confirm({
                    title: `你确定要删除吗`,
                    onOk: () => {
                        deleteAllDepart({
                            id: item.ID
                        }).then(res => {
                            if (res.state == 'success') {
                                this.$Message.success(res.message);
                            } else {
                                this.$Message.error(res.message);
                            }
                            this.getTablesListData();
                        });
                    },
                    onCancel: () => {
                        this.$Message.info('取消成功');
                    }
                });
            }
        },
        /* 表单数据 */
        initFormItem() {
            return {};
        }
    }
};
</script>

<style lang="less" scoped>
.wrap {
    padding: 20px;
    background: #fff;
}
</style>
